<template>
	<view class="main" :style="showBool || soldShow ? 'overflow: hidden;' : ''">
		<swiper style="border-radius: 40rpx" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="3000"
			:duration="duration">
			<swiper-item v-for="(item, index) in getImgList(classData.mainImage)">
				<view style="height: 95vw !important" class="swiper-item uni-bg-red">
					<image :src="path + item" mode="aspectFill" style="width: 100%; height: 100%"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="rented">
			<view class="rented-price">
				<text class="rented-top-text">
					<span>￥{{ dataSum }}</span>
					<text>/天</text>
				</text>
				<h3>热租大牌</h3>
			</view>
			<view class="rented-price" style="font-size: 25rpx">
				<view class="rented-bootom-text">
					<text>￥{{ sku.leaseRentalRules[0].originalPrice || '' }}/天</text>
					<u-icon name="question-circle" color="#fff"></u-icon>
				</view>
				<text>特划算·安心租</text>
			</view>

			<view class="minute">
				<view class="minute-top">
					<view class="minute-name">
						<text>
							{{ classData.description || '保密中' }}
						</text>
					</view>

					<view class="str-icons">
						<view class="str-icon" v-for="(item, index) in data" :key="index">
							<u-icon :name="item.icon"></u-icon>
							<text>{{ item.str }}</text>
						</view>
					</view>

					<view class="form">
						<view class="form-row">
							<view class="form-naem">取件方式</view>
							<view class="form-text">
								<view v-for="(item, index) in formData.chmod" :key="index" @click="chmodbooton(item)">
									<text
										:class="['form-text-background', forRef.chmod === item ? 'avater' : 'noAvater']">
										{{ item }}
									</text>
								</view>
							</view>
						</view>

						<view class="form-row" v-if="classData.specification">
							<view class="form-naem">规格</view>
							<view class="form-text">
								<text :class="['form-text-background','avater']">
									{{classData.specification}}
								</text>
							</view>
						</view>

						<view class="form-row" v-if="classData.leaseGoodSkus.length > 0" style="margin-bottom: 40rpx;">
							<view class="form-naem">{{classData.productName }}规格</view>
							<view class="form-text">
								<view v-for="(item, index) in classData.leaseGoodSkus" :key="index"
									@click="skubooton(item)" style="width: 50%;">
									<text
										:class="['form-text-background-GG', sku.sku == item.sku ? 'avater' : 'noAvater']">
										{{ item.sku }}
									</text>
								</view>
							</view>
						</view>

						<view class="form-row" style="margin-bottom: 40rpx;">
							<view class="form-naem">租期</view>
							<view class="form-text">
								<view v-for="(item, index) in tenancyList" :key="index"
									@click="tenancybooton(item, index)">
									<text :class="['form-text-background', tenancyindex === index ? 'avater' : '']"
										:style="{
											backgroundColor: tenancyindex === index ? '#EDF4FF' : '#F5F5F5'
										}">
										{{ item.rentalDays }}{{ item.rentalDaysUnitName }}
									</text>
								</view>
								<text :class="['form-text-background', tenancyindex === -9 ? 'avater' : '']" :style="{
										backgroundColor: tenancyindex === -9 ? '#EDF4FF' : '#F5F5F5'
									}" @click="openInput()">
									{{ numdata ? numdata + '天' : '选择天数' }}
								</text>
							</view>

							<u-popup round="20" :mask='true' :show="showInput" @close="close" mode="center">
								<view class="popup">
									<input v-model="numdata" type="text" placeholder="请输入租期天数" />
									<text class="error-text">{{ numdataVerifyText }}</text>
									<view class="botton">
										<button style="background: #ccc; color: #7c5fff; margin-right: 30rpx"
											@click="close">取消</button>
										<button @click="submitInput">确认</button>
									</view>
								</view>
							</u-popup>
						</view>
						<view class="form-row">
							<view class="form-naem">数量</view>
							<view class="form-text">
								<u-icon name="minus-circle" size="25" @click="count(-1)"></u-icon>
								<text class="number">{{ forRef.num }}</text>
								<u-icon name="plus-circle" size="25" @click="count(1)"></u-icon>
							</view>
						</view>
						<view class="form-row">
							<view class="form-naem">押金</view>
							<view class="form-text">
								<text class="number">{{ sku.cashPledge || 0 }}</text>
							</view>
						</view>
					</view>

					<!-- 	<view class="minute-bottom">
						<view class="img-background">
							<view class="minute-top">——放心租——</view>
							<view class="minute-bot">
								<view v-for="(item, index) in peaceList" class="minute-img">
									<image :src="item.img" style="width: 46rpx; height: 46rpx"></image>
									<text>{{ item.name }}</text>
								</view>
							</view>
						</view>
					</view> -->

				</view>
			</view>

			<!-- :classData="classData" -->
			<view class="content body">
				<view class="top">
					<view v-for="(item, index) in ['商品详情', '租赁流程']" :key="index">
						<view class="group" @click="particularsBooton(index)">
							<text>{{ item }}</text>
							<view :class="[particularsId === index ? 'top-bootom' : '']"></view>
						</view>
					</view>
				</view>

				<view class="details-img">
					<template v-if="getImgListTab.length">
						<view v-for="item in getImgListTab" :key="item">
							<image :src="url2 + item"></image>
						</view>
					</template>
					<template v-else>
						<u-empty mode="data" icon="/static/main/image2x.png"></u-empty>
					</template>
				</view>

				<view class="bootom">
					<view class="name">为你推荐</view>
					<recommend :imageList="imgList"></recommend>
				</view>

				<view style="height: 200rpx;">

				</view>
			</view>
		</view>

		<view class="footer">
			<view class="footer-margin">
				<view class="top">
					<view>
						<text>租金：</text>
						<text class="picker">￥{{ numberSum }}</text>
						<text class="tag">惠</text>
					</view>

					<view class="rental">日租价：￥{{ dataSum }}/天</view>
				</view>
				<view class="bootom">
					<view class="bootom-display" @click="booton('home')">
						<img src="/static/tabBar/index.png" class="imgs" />
						<text>首页</text>
					</view>
					<view class="bootom-display" @click="keFu()">
						<img src="/static/main/Frame2x.png" class="imgs" />
						<text>客服</text>
					</view>
					<view class="bootom-display" @click="collectionBool ? deleteCollectin(1) : setCollection()">
						<img v-if="!collectionBool" src="/static/main/3x.png" class="imgs" />
						<img v-else src="/static/main/3y.png" class="imgs" />
						<text>收藏</text>
					</view>
					<view>
						<button open-type="getPhoneNumber" @getphonenumber="getPhonenumber" v-if="!isToken">免押租</button>
						<button @click="deposit()" v-else>免押租</button>
					</view>
				</view>
			</view>
		</view>

		<u-popup :round="20" :show="depositShow" mode="bottom" @close="depositClose">
			<view class="deposit-bootom">
				<view class="top">
					乐亨租赁
					<text>申请</text>
				</view>
				<view class="deposit-text">
					<text class="name-text">获取你的头像和昵称</text>
					<text>将用于为你提供本应用当前服务</text>
				</view>
				<view class="deposit-avater">
					<view class="avater-image">
						<image style="width: 88rpx; height: 88rpx" src="/static/main/cs02.jpg" mode="aspectFill">
						</image>
						<text>头像</text>
					</view>
					<view class="avater-button">更换</view>
				</view>
				<view class="deposit-button">
					<button class="left">拒绝</button>
					<button @click="hotline()">同意</button>
				</view>
			</view>
		</u-popup>

		<u-popup :round="20" :closeable="true" :show="hotlineShow" mode="center" @close="hotlineClose">
			<view class="hotline-center">
				<view class="hotline-top" @click="onCopy(storeClass.phone)">
					<view style="display: flex; align-items: center">
						<image style="width: 88rpx; height: 88rpx" src="/static/log.jpg" mode="aspectFill">
						</image>
						<view class="hotline-text">
							<text style="font-weight: 600; line-height: 60rpx">平台热线</text>
							<text style="font-size: 26rpx; color: #777777">{{storeClass.phone}}</text>
						</view>
					</view>
					<u-icon name="arrow-right" size="25"></u-icon>
				</view>

				<view style="margin-top: 30rpx; font-weight: 500">
					<span style="color: red">*</span>
					<text>扫码添加客服微信</text>
				</view>

				<view class="hotline-m">
					<image style="width: 250rpx; height: 250rpx" :src="path + storeClass.wx" mode="aspectFill"></image>
				</view>
			</view>
		</u-popup>

		<u-popup :round="20" :show="soldShow" mode="center">
			<view class="sold-center">
				<view class="sold-text">商品已下架，请重新选择商品</view>
				<button @click="soldClose()">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import recommend from '@/subPages/components/recommend.vue';
	import api from '@/api/index.js';
	import myApi from '@/api/my';
	import main from '@/api/main.js';
	import {
		getDate
	} from '@/utils/index.js';
	import {
		baseUrl
	} from '../../config.js';
	import order from '../../api/order.js';

	export default {
		components: {
			recommend
		},
		data() {
			return {
				sku: '',
				showBool: false, //控制数控是否可以滚动
				soldShow: false, //商品下架通知
				hotlineShow: false, //热线扫码弹窗
				depositShow: false, //免押租弹框控制
				showInput: false, // 控制输入框的显示与隐藏
				numdata: null, //租期天数
				numberSum: 0, //合计租金
				dataSum: 0, //日租金
				classData: {},
				url2: '',
				//放心租
				peaceList: [{
						img: '/static/main/Group90x.png',
						name: '假一赔三'
					},
					{
						img: '/static/main/Group92.png',
						name: '全国联保'
					},
					{
						img: '/static/main/Group93.png',
						name: '免赔保障'
					},
					{
						img: '/static/main/Group91.png',
						name: '隐私清除'
					}
				],
				path: api.getPath(),
				data: [{
						str: '平台担保',
						icon: 'rmb-circle'
					},
					{
						str: '信用免押',
						icon: 'rmb-circle'
					},
					{
						str: '租后无忧',
						icon: 'rmb-circle'
					},
					{
						str: '现货现发',
						icon: 'rmb-circle'
					}
				],
				// 租期列表
				tenancyList: [],
				formData: {
					// '默认', 
					chmod: ['自提', '邮寄'],
					tenancy: ['1月', '2月', '6月', '1年']
				},
				skuS: [],
				tenancyindex: 0,

				forRef: {
					chmod: '自提', //取件方式
					tenancy: null, //天数
					num: 1 //租物数量
				},
				id: null,
				//判断是否被收藏
				collectionBool: false,
				//判断自定义天数
				numdataVerifyText: '',
				isToken: false,
				particularsId: 0,
				imgList: [],
				isApprove: true, //认证
				storeClass: {},
				rentalProcessImages: ""
			};
		},
		onLoad(e) {
			this.id = e.id;
			if (e.id) {
				//获取商品详情
				this.getIdClass(e.id);
				this.id = e.id;
			}
			if (uni.getStorageSync('token')) {
				this.getCollectionId();
				this.isToken = true;
				this.isInfo();
			}
			this.getPlatform()
			this.getImages()
		},
		onShow() {
			this.url2 = baseUrl;
			const pages = getCurrentPages(); // 获取当前页面栈
			const currentPage = pages[pages.length - 1]; // 当前页面
			const query = currentPage.options; // 获取跳转时传递的参数
			this.id = query.id;
			this.getList();
			if (uni.getStorageSync('token')) {
				this.isInfo();
			}

		},
		computed: {
			getImgListTab() {
				// 兼容 classData 结构
				// const arr = [this.classData.detailImages, this.classData.faqImages, this.classData.parameterImages, this
				// 	.classData.rentalProcessImages
				// ];
				const arr = [this.classData.detailImages, this.rentalProcessImages];
				let list = arr[this.particularsId]?.split(',');
				if (list) {
					return list;
				}
				return [];
			}
		},
		methods: {
			getImages() {
				order.systemInfoList({
					title: "租赁流程图"
				}).then((res) => {
					this.rentalProcessImages = res.rows[0].image
				})
			},
			onCopy(row) {
				wx.setClipboardData({
					data: row,
					success(res) {
						wx.showToast({
							title: '客服电话复制成功',
							icon: 'success'
						});
					}
				});
			},
			getPlatform() {
				order.systemInfoList({
					title: "平台热线"
				}).then((res) => {
					this.storeClass.phone = res.rows[0].content.replace(/<[^>]+>/g, '').replace(/&nbsp;/g, ' ');
				})
				order.systemInfoList({
					title: "客服微信"
				}).then((res) => {
					this.storeClass.wx = res.rows[0].image
				})
			},
			skubooton(row) {
				this.sku = row
				this.count(0)
			},
			async isInfo() {
				const res = await main.getUserInfo()
				this.isApprove = res.user.idCardNo ? false : true;
				if (!this.isApprove) {
					return
				}
				this.isApprove = res.user.idCardJust ? false : true;
			},
			getImgList(row) {
				let list = row?.split(',');
				if (list) {
					return list;
				}
				return [];
			},
			getPhonenumber(e) {
				uni.showLoading({
					title: '登录中...',
					mask: true
				});
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					console.log('授权成功');
					const data = {
						response: e.detail.encryptedData,
						sign: e.detail.sign
					};
					my.getAuthCode({
						scopes: 'auth_user',
						success: (authRes) => {
							// 请求用户信息接口
							if (authRes.authCode) {
								const parentId = uni.getStorageSync('parentId');
								myApi
									.Login({
										response: JSON.stringify(data),
										code: authRes.authCode,
										parentId: parentId
									})
									.then((res) => {
										this.isToken = true;
										uni.hideLoading();
										uni.setStorageSync('token', res.token);
										this.isInfo();
									});
							}
						}
					});
				}
			},
			keFu() {
				this.hotlineShow = true;
			},
			//自定义天数校验
			numdataVerify() {
				const value = this.numdata.trim();
				const regex = /^\d{1,4}$/;
				if (!regex.test(value)) {
					this.numdataVerifyText = '请输入0-365之间的整数';
					return false;
				}
				if (value > 365) {
					this.numdata = 365
					uni.showToast({
						title: '最多365天'
					})
				}
				if (value < this.classData.minTenancy) {
					this.numdataVerifyText = `${this.classData.minTenancy}天起租`;
					return false;
				}
				this.numdataVerifyText = '';
				return true;
			},
			soldClose() {
				//商品已下架，返回上级页面
				uni.navigateBack({
					data: 1
				});
			},
			deposit() {
				if (this.isApprove) {
					uni.navigateTo({
						url: '/subPages/main/setUser'
					})
					return
				}

				//免押租
				this.forRef.numberSum = this.numberSum;
				this.forRef.id = this.id;
				this.forRef.isFreeDetain = true;
				this.forRef.sku = this.sku
				this.forRef.dataSum = this.dataSum
				this.forRef.productName = this.classData.specification
				//新增订单信息
				uni.navigateTo({
					url: `/subPages/mine/order?forRef=${encodeURIComponent(JSON.stringify(this.forRef))}`
				});
			},
			depositClose() {
				this.depositShow = false;
				this.showBool = false;
			},
			hotline() {
				this.depositShow = false;
				this.hotlineShow = true;
				this.showBool = true;
			},
			hotlineClose() {
				this.hotlineShow = false;
				this.showBool = false;
			},
			openInput() {
				this.tenancyindex = -9;
				this.showInput = true; // 显示输入框
			},
			close() {
				this.tenancyindex = 0;
				this.showInput = false; // 隐藏输入框
				this.numdata = null; // 清空输入框内容
				this.tenancybooton(this.tenancyList[0], 0);
			},
			submitInput() {
				// 处理提交逻辑，例如保存数据
				if (this.numdata === null) {
					this.close();
				}
				if (!this.numdataVerify()) {
					return;
				}
				this.forRef.tenancy = Number(this.numdata);
				main.getPrice({
					id: this.sku.id,
					day: this.forRef.tenancy,
					number: this.forRef.num
				}).then((res) => {
					if (res.code == 200) {
						this.numberSum = res.data.totalAmount;
						this.dataSum = res.data.dailyAmount;
					}
				});
				this.showInput = false; // 隐藏输入框
				// this.countSum();
			},
			//计算
			countSum() {
				this.numberSum = this.forRef.tenancy * this.forRef.num * this.dataSum;
			},
			count(num) {
				if (this.forRef.num <= 0 && num < 0) {
					return;
				}
				this.forRef.num += num;
				main.getPrice({
					id: this.sku.id,
					day: this.forRef.tenancy,
					number: this.forRef.num
				}).then((res) => {
					if (res.code == 200) {
						this.numberSum = res.data.totalAmount;
						this.dataSum = res.data.dailyAmount;
					}
				});
			},
			// 取件方式
			chmodbooton(item) {
				this.forRef.chmod = item;
			},
			async tenancybooton(item, index) {
				this.tenancyindex = index;
				this.forRef.tenancy = item.rentalDays * item.rentalDaysUnit;
				const res = await main.getPrice({
					id: this.sku.id,
					day: this.forRef.tenancy,
					number: this.forRef.num
				})
				if (res.code == 200) {
					this.numberSum = res.data.totalAmount;
					this.dataSum = res.data.dailyAmount;
				}
			},
			booton(row) {
				if (row === 'home') {
					uni.reLaunch({
						url: '/pages/index'
					});
				}
			},
			getIdClass(id) {
				main.getIdClass(id)
					.then(async (data) => {
						this.classData = data.data;
						if (this.classData.ifCollect) {
							this.collectionBool = true;
						}
						this.sku = this.classData.leaseGoodSkus[0]
						this.tenancyList = this.classData.leaseDayRules.map((item) => {
							return {
								id: item.id,
								rentalDays: item.rentalDays, // 数字
								rentalDaysUnit: item.rentalDaysUnit, // 周期
								rentalDaysUnitName: item.rentalDaysUnit == 1 ? '天' : item.rentalDaysUnit ==
									7 ?
									'周' : item.rentalDaysUnit == 30 ? '月' : item.rentalDaysUnit == 365 ?
									'年' : ''
							};
						});
						await this.tenancybooton(this.tenancyList[0], 0);
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			setCollection() {
				if (uni.getStorageSync('token')) {
					//已登录判断是否登录过期
					main.getUserInfo()
						.then((res) => {
							return true;
						})
						.catch((erro) => {
							return false;
						});
				} else {
					uni.showToast({
						title: '登录失效，请重新登录',
						icon: 'none'
					});
					return false;
				}

				let obj = this.classData;
				obj.productId = this.classData.id;
				main.setCollection(obj)
					.then((data) => {
						this.collectionBool = true;
						uni.showToast({
							title: '收藏成功',
							icon: 'success', // 可选 success/loading/none
							duration: 2000 // 持续时间，单位ms
						});
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			getCollectionId() {
				main.getCollectionId(this.id)
					.then((data) => {
						// this.collectionBool = true;
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			deleteCollectin() {
				main.deleteCollectin(this.id)
					.then((data) => {
						console.log('data,', data);
						this.collectionBool = false;
						if (data.code == 200) {
							uni.showToast({
								title: '删除成功',
								icon: 'none'
							});
							this.getCollectionId();
						}
					})
					.catch((erro) => {
						console.log(erro);
					});
			},
			particularsBooton(row) {
				this.particularsId = row;
			},
			getList() {
				main.getList({}).then((res) => {
					this.imgList = res.rows.map(() => res.rows[Math.floor(Math.random() * res.rows.length)]);
					this.imgList = this.imgList.slice(0, 4);
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.error-text {
		color: #ff4545;
		font-size: 24rpx;
		margin-top: 10rpx;
		position: absolute;
	}

	.specifications {
		margin-left: 20rpx;
	}

	.main {
		min-height: 100vh;
		width: 100%;
	}

	.sold-center {
		height: 230rpx;
		width: 600rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.sold-text {
			font-weight: 600;
			margin-top: 50rpx;
			margin-bottom: 50rpx;
		}

		button {
			width: 200rpx;
			height: 70rpx;
			color: #1677ff;
			line-height: 70rpx;
			border-radius: 40rpx;
			background-color: #d8e8fd;
		}
	}

	.hotline-center {
		height: 530rpx;
		width: 600rpx;
		margin: 50rpx;

		.hotline-top {
			margin-top: 20rpx;
			height: 150rpx;
			background-color: #f6faff;
			border-radius: 10rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 40rpx;

			.hotline-text {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
			}
		}

		.hotline-m {
			padding: 40rpx 0;
			display: flex;
			justify-content: center;
		}
	}

	.deposit-bootom {
		height: 400rpx;
		margin: 30rpx 50rpx;

		.top {
			color: #1677ff;
			font-size: 50rpx;
			font-weight: bold;
			display: flex;
			align-items: center;

			text {
				margin-left: 20rpx;
				color: #333;
				font-size: 30rpx;
				font-weight: normal;
			}

			margin-bottom: 20rpx;
		}

		.deposit-text {
			display: flex;
			flex-direction: column;

			.name-text {
				font-weight: 600;
			}

			margin-bottom: 30rpx;
		}

		.deposit-avater {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 50rpx;

			.avater-image {
				display: flex;
				align-items: center;

				image {
					border-radius: 50%;
				}

				text {
					margin-left: 10rpx;
					font-weight: 600;
				}
			}

			.avater-button {
				color: #1677ff;
			}
		}

		.deposit-button {
			display: flex;
			justify-content: space-evenly;

			button {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				background-color: #1677ff;
				color: #fff;
				border-radius: 10rpx;
			}

			.left {
				background-color: transparent;
				color: #aaaaaa;
			}
		}
	}

	.imgs {
		width: 34rpx;
		height: 34rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
		left: 0;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;

		.footer-margin {
			margin: 20rpx 50rpx;

			.top {
				display: flex;
				align-items: center;

				.picker {
					color: red;
					font-size: 35rpx;
					font-weight: 600;
					margin-right: 5rpx;
				}

				.rental {
					margin-left: 100rpx;
					font-weight: 500;
				}
			}

			.bootom {
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;

				.bootom-display {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				button {
					width: 350rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
					color: #fff;
					border-radius: 40rpx;
				}
			}
		}
	}

	.avater {
		color: #3b5dff;
		background-color: #EDF4FF;
	}

	.noAvater {
		// border: 1px saddlebrown solid;
		background-color: #F5F5F5;
	}

	.popup {
		width: 400rpx;
		height: 200rpx;
		margin: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;

		.botton {
			display: flex;
			align-items: center;
			margin-top: 100rpx;

			button {
				background: linear-gradient(270deg, #7c5fff 0%, #3b5dff 100%);
				color: #fff;
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
			}
		}
	}

	.rented {
		margin-top: 20rpx;
		padding-top: 15rpx;
		width: 100%;
		height: 180rpx;
		background: linear-gradient(to left, #fe4b70, #ffa75b);
		border-radius: 40rpx 40rpx 0 0;

		.rented-price {
			margin: 0 30rpx;
			display: flex;
			justify-content: space-between;
			color: #fff;

			h3 {
				font-size: 35rpx;
				font-weight: bold;
			}

			.rented-top-text {
				span {
					font-size: 35rpx;
					font-weight: bold;
				}

				text {
					font-size: 28rpx;
				}
			}

			.rented-bootom-text {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 20rpx;

				text {
					text-decoration: line-through;
				}
			}
		}

		.minute {
			margin-top: 15rpx;
			width: 100%;
			background-color: #fff;
			border-radius: 40rpx 40rpx 0 0;

			.minute-top {
				padding: 30rpx;

				.minute-name {
					span {
						background-color: red;
						color: #fff;
						margin-right: 15rpx;
						padding: 0 5rpx;
						border-radius: 8rpx;
						font-weight: 400;
					}

					font-size: 35rpx;
					font-weight: 600;
				}

				.str-icons {
					display: flex;
					justify-content: space-between;
					align-items: center;

					margin-top: 30rpx;

					.str-icon {
						display: flex;

						text {
							margin-left: 5rpx;
						}
					}
				}

				.form {
					margin-top: 30rpx;
					width: 100%;
					min-height: 400rpx;
					border-radius: 30rpx;
					background-color: #f8f9ff;
					padding: 10rpx 0 0 10rpx;

					position: relative;

					.form-row {
						min-height: 50rpx;
						padding: 20rpx;
						display: flex;
						align-items: center;

						.form-naem {
							font-weight: bold;
							width: 140rpx;
						}

						.form-text {
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							position: absolute;
							left: 180rpx;
							font-size: 25rpx;

							.form-text-background {
								display: block;
								// width: 85rpx;
								min-width: 120rpx;
								height: 45rpx;
								display: flex;
								align-items: center;
								justify-content: center;

								margin-right: 20rpx;
								// margin-bottom: 20rpx;
								border-radius: 10rpx;
							}

							.form-text-background-GG {
								display: block;
								// width: 85rpx;
								min-width: 120rpx;
								height: 45rpx;
								display: flex;
								align-items: center;
								justify-content: safe;

								margin-right: 20rpx;
								margin-bottom: 20rpx;
								border-radius: 10rpx;
							}

							.number {
								font-size: 30rpx;
								margin: 0 20rpx;
								color: #3b5dff;
							}
						}
					}
				}

				.minute-bottom {
					margin-top: 30rpx;
					width: 100%;
					height: 280rpx;
					border-radius: 30rpx;
					background-color: #f8f9ff;
					padding: 10rpx 0 0 10rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					.img-background {
						width: 614rpx;
						height: 208rpx;
						background: url('@/static/main/Rectangle12x.png') no-repeat;
						background-size: 614rpx 208rpx;
						display: flex;
						flex-direction: column;
						align-items: center;

						.minute-top {
							margin: 0;
							padding: 0;
							width: 254rpx;
							height: 52rpx;
							background-color: #f03b4f;
							border-radius: 0 0 50rpx 50rpx;

							text-align: center;
							line-height: 50rpx;
							color: #fff;
							font-weight: 500;
							font-size: 28rpx;
						}

						.minute-bot {
							margin-top: 35rpx;
							width: 100%;
							display: flex;
							justify-content: space-evenly;

							.minute-img {
								width: 110rpx;
								height: 110rpx;
								border-radius: 15rpx;
								background-color: #fff;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: space-around;

								font-size: 24rpx;
								color: #f03b4f;
							}
						}
					}
				}
			}
		}
	}

	.body {
		height: 100vh;
		padding-bottom: 120rpx;
	}

	.top {
		width: 100%;
		display: flex;
		justify-content: space-evenly;

		.group {
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100rpx;

			.top-bootom {
				margin-top: 10rpx;
				width: 50rpx;
				height: 10rpx;
				background-color: #3b5dff;
				border-radius: 5rpx;
			}
		}
	}

	.details-img {
		image {
			width: 100%;
			height: 1000rpx;
			border-radius: 20rpx;
		}
	}

	.bootom {
		margin-top: 50rpx;
		padding-bottom: 220rpx;

		.name {
			font-weight: 600;
		}
	}
</style>